<template>
    <div class="top">
        <div class="time">{{ getCurrentTime }} </div>
        <!-- <img src="@/assets/title.png" alt=""> -->
        <div class="main">
            <div class="main_l">
                <div class="title" v-for="(item, key) in titleL" :key="key" @click="enterPage(item.path)">{{ item.name
                    }}</div>
            </div>
            <div class="main_r">
                <div class="title" v-for="(item, key) in titleR" :key="key">{{ item.name }}</div>
            </div>
        </div>

    </div>
</template>
<script setup>

import { ref, computed, onUnmounted, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
let titleL = ref([{ name: '灾害一张图', path: '/home' }, { name: '基本情况', path: '/information' },])
let titleR = ref([{ name: '应急调度' }, { name: '转移情况' }])
const currentTime = ref(new Date());
const getCurrentTime = computed(() => {
    // var d = new Date();
    var year = currentTime.value.getFullYear();
    var month = currentTime.value.getMonth();
    month = month + 1 > 12 ? 1 : month + 1;
    month = month > 9 ? month : "0" + month.toString();
    var day = currentTime.value.getDate();
    day = day > 9 ? day : "0" + day.toString();
    var hour = currentTime.value.getHours();
    hour = hour > 9 ? hour : "0" + hour.toString();
    var minute = currentTime.value.getMinutes();
    minute = minute > 9 ? minute : "0" + minute.toString();
    var second = currentTime.value.getSeconds();
    second = second > 9 ? second : "0" + second.toString();
    return `${year}-${month}-${day} ${hour}:${minute}:${second} `;
});
function enterPage(path) {
    router.push(path);
}
// 开始获取当前时间
const startClock = () => {
    setInterval(() => {
        currentTime.value = new Date();
    }, 1000);
};
onMounted(() => {
    startClock()
})
onUnmounted(() => {
    clearInterval(startClock);
})
</script>
<style scoped src="./index.css"></style>